/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useState, useEffect } from 'react';
import { message, Tree } from 'antd';
import type { RefuseModalProps } from '../index.d';
import ProForm, { ModalForm, ProFormTextArea, ProFormCheckbox } from '@ant-design/pro-form';
import { editBlack, getBrandList } from '@/services/mini/qjPullBlack';
import styles from './index.less';

const RefuseModal: React.FC<RefuseModalProps> = ({ visible, item, onCancel, tableRef }) => {
  const level = ['团员', '团长', '加盟商'];
  const { id, attribute, league_id, regiment_id } = item;
  const [limitList, setLimitList] = useState<any>([]);
  const [limitData, setLimitData] = useState<string[]>([]);

  const handleTreeCheck = (data: any) => {
    setLimitData(data.filter((ite: any) => !!ite));
  };
  useEffect(() => {
    setLimitData(item.black_brand);
    getBrandList({}).then((data: any) => {
      const limits = [
        {
          title: '全部',
          key: '',
          children: data.map((ite: any) => ({ title: ite.label, key: ite.value })),
        },
      ];
      setLimitList(limits);
    });
  }, [item.black_brand]);
  return (
    <ModalForm
      className={styles.qjModal}
      title='品牌设置'
      visible={visible}
      requiredMark={false}
      modalProps={{
        onCancel,
        destroyOnClose: true,
      }}
      onFinish={async (values: any) => {
        const { black_type } = values;
        const type = level.indexOf(attribute);
        const { code, msg } = await editBlack({
          relation_id: type === 0 ? id : type === 1 ? regiment_id : league_id,
          status: limitData.length === 0 ? '0' : '1',
          type,
          league_id,
          regiment_id,
          ...values,
          black_type: black_type.join(','),
          brand: limitData.join(','),
        });
        if (code == 0) {
          message.success('操作成功');
          tableRef.current?.reload();
          onCancel();
          return;
        }
        message.error(msg);
      }}
      initialValues={{
        ...item,
        black_type: item.black_type && item.black_type.split(','),
      }}
    >
      <ProFormCheckbox.Group
        label='应用范围'
        name='black_type'
        rules={[{ required: true, message: '请选择应用范围' }]}
        fieldProps={{
          options: [
            {
              label: '个人',
              value: '0',
              disabled: true,
            },
            {
              label: '下级团员',
              value: '1',
            },
            {
              label: '下级团长',
              value: '2',
            },
            {
              label: '下级团长所属团员',
              value: '3',
            },
          ].splice(0, level.indexOf(attribute) + (attribute === '加盟商' ? 2 : 1)),
        }}
      />
      <Tree
        className={styles.qjModal__tree}
        checkable
        treeData={limitList}
        defaultExpandAll
        defaultCheckedKeys={limitData}
        onCheck={handleTreeCheck}
      />
      <ProForm.Group>
        <ProFormTextArea
          label='备注'
          width='xl'
          name='remark'
          placeholder='请输入备注'
          allowClear
          rules={[{ required: true, message: '请输入备注' }]}
          fieldProps={{
            rows: 4,
            maxLength: 20,
          }}
        />
      </ProForm.Group>
    </ModalForm>
  );
};

export default RefuseModal;
